<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/register.css">
</head>

<body>
    <!-- register头部 -->
    <div class="top">
        <div class="top-main container">
            <a href="../pages/index.html">
                <img src="../images/logo-white.png">
            </a>

            <p class="top-main-right fr">已有源码账号，<a href="../pages/login.html">立即登录</a></p>
        </div>
    </div>
    <!-- register中间部分 -->
    <div class="mask">
        <div class="mask-main">
            <form action="#" class="form">
                <!-- 文字部分 -->
                <h1 class="mask-h1">欢迎注册</h1>
                <h2 class="mask-h2">百款接口免费试用</h2>
                <p class="mask-p">注册即送300元大礼包</p>
                <!-- 登录框内容 -->
                <!-- 用户名 -->
                <div>
                    <input type="text" name="username" class="item-main" placeholder="用户名（6~20位字母数字）">

                    <img src="../images/clearInput.png" class="item-img">
                    <p class="warning">
                        <span class="warning-span"></span>昵称需在6-12位字母数字间</p>
                </div>
                <!-- 手机号 -->
                <div>
                    <input type=" text" placeholder="请输入手机号码" class="item-main">
                    <img src="../images/clearInput.png" class="item-img">
                    <p class="warning">
                        <span class="warning-span"></span>请输入正确的手机号</p>
                </div>
                <!-- 验证码 -->
                <div class="item">
                    <input type="text" placeholder="请输入手机短信验证码" class="item-main">
                    <img src="../images/clearInput.png" class="item-img">
                    <button class="button">获取验证码</button>
                    <p class="warning">
                        <span class="warning-span"></span>请输入4位手机验证码</p>
                </div>
                <!-- 密码 -->
                <div>
                    <input type="password" placeholder="请输入6至12位的密码" class="item-main">
                    <img src="../images/clearInput.png" class="item-img">
                    <p class="warning">
                        <span class="warning-span"></span>
                        请输入6至12位的密码</p>
                </div>
                <div class="item-label">
                    <label>
                        <input type="checkbox" class="ckbox">
                        <span class="ckbox-span">
                            我已阅读并接受
                            <a href="#" class="ckbox-a">《源码用户服务协议》</a>
                            <a href="#" class="ckbox-a">《源码隐私政策》</a>
                        </span>
                    </label>
                </div>
                <button type="button" class="btn">立即注册</button>
            </form>

        </div>

    </div>
    <script src="../js/register.js">

    </script>
</body>

</html>